<template>
  <v-card flat class="QuoteDetails-Container rounded-lg">
    <v-toolbar
      class="header mb-0"
      tile
      elevation="0"
      color="#626C84"
      height="40"
      dense
    >
      <v-toolbar-title>Quote Details</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn class="icon-btn mr-4" width="16" height="16" icon>
        <v-icon color="#fff">mdi-file</v-icon>
      </v-btn>
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-btn
            @click="openSave"
            v-on="on"
            class="icon-btn mr-0"
            width="16"
            height="16"
            icon
          >
            <v-icon color="#fff">mdi-content-save</v-icon>
          </v-btn>
        </template>
        Save
      </v-tooltip>
    </v-toolbar>
    <div v-if="propQuoteDetails" class="details-content text-left">
      <v-card min-height="320" flat class="mt-4">
        <v-row no-gutters class="px-6 basic-content">
          <v-col :cols="8" class="text-left basic-content-left">
            <v-spacer>
              <v-col v-if="propStep === 2" class="pt-0 line">
                <v-row no-gutters>
                  <v-col class="text-left" offset="2" cols="9">
                    <v-btn
                      @click="openSelectMessage"
                      class="info-btn"
                      color="#FFA501"
                      small
                      rounded
                      outlined
                      elevation="0"
                    >
                      <v-icon color="#FFA501" left> mdi-alert-circle </v-icon>
                      <span class="btn-text">
                        Latest approval/ rejection messages show here
                      </span>
                    </v-btn>
                  </v-col>
                </v-row>
              </v-col>
              <v-col class="pt-0 line">
                <v-row no-gutters>
                  <v-col :cols="2">Customer Name</v-col>
                  <v-col class="text-left" :cols="9">
                    <v-text-field
                      v-model="propQuoteDetails.customerName"
                      v-validate="'required'"
                      name="Customer Name"
                      class="gray-input"
                      dense
                      hide-details
                      solo
                      label="please enter password Customer Name"
                    ></v-text-field>
                    <span class="vee-validate-error">
                      {{ errors.first("Customer Name") }}
                    </span>
                  </v-col>
                </v-row>
              </v-col>
              <v-col class="pt-0 line">
                <v-row no-gutters class="align-start">
                  <v-col :cols="2">Description</v-col>
                  <v-col class="text-left" :cols="9">
                    <v-textarea
                      v-model="propQuoteDetails.description"
                      v-validate="'required'"
                      name="Description"
                      class="gray-input"
                      dense
                      hide-details
                      height="72"
                      solo
                      no-resize
                      label="please enter password Description"
                    >
                    </v-textarea>
                    <span class="vee-validate-error">
                      {{ errors.first("Description") }}
                    </span>
                  </v-col>
                </v-row>
              </v-col>
              <v-col class="pt-0 line">
                <v-row no-gutters>
                  <v-col :cols="2">Amount</v-col>
                  <v-col class="text-left" :cols="3">
                    <v-text-field
                      v-model="propQuoteDetails.amount"
                      v-validate="'required|usd'"
                      name="Amount"
                      class="gray-input text-right"
                      dense
                      hide-details
                      solo
                      label="please enter amount"
                    ></v-text-field>
                    <span class="vee-validate-error">
                      {{ errors.first("Amount") }}
                    </span>
                  </v-col>
                  <v-col :cols="1" :offset="1">Cost</v-col>
                  <v-col class="text-left" :cols="3">
                    <v-text-field
                      v-model="propQuoteDetails.cost"
                      v-validate="'required|usd'"
                      name="Cost"
                      class="gray-input text-right"
                      dense
                      hide-details
                      solo
                      label="please enter cost"
                    ></v-text-field>
                    <span class="vee-validate-error">
                      {{ errors.first("Cost") }}
                    </span>
                  </v-col>
                </v-row>
              </v-col>
              <v-col class="pt-0 line">
                <v-row no-gutters>
                  <v-col :cols="2">G.P</v-col>
                  <v-col class="text-left" :cols="3">
                    <v-text-field
                      v-model="propQuoteDetails.gain"
                      v-validate="'required|usd'"
                      name="G.P"
                      class="gray-input text-right"
                      dense
                      hide-details
                      solo
                      label="please enter G.P"
                    ></v-text-field>
                    <span class="vee-validate-error">
                      {{ errors.first("G.P") }}
                    </span>
                  </v-col>
                  <v-col class="ml-6"> {{ gpPercentage }} </v-col>
                </v-row>
              </v-col>
              <v-col class="pt-0 line">
                <v-row no-gutters>
                  <v-col :cols="6">
                    <v-row no-gutters>
                      <v-col :cols="4">Retention</v-col>
                      <v-col class="text-left" :cols="8">
                        <v-card class="d-flex align-center" flat width="40%">
                          <v-text-field
                            v-model="propQuoteDetails.retention"
                            v-validate="'required|percentage'"
                            name="Retention"
                            class="gray-input text-right"
                            dense
                            hide-details
                            type="number"
                            :max="100"
                            :min="0"
                            solo
                          ></v-text-field>
                          <span class="text-left ml-1"> % </span>
                        </v-card>
                        <span class="vee-validate-error">
                          {{ errors.first("Retention") }}
                        </span>
                      </v-col>
                    </v-row>
                  </v-col>
                  <!-- <v-col :cols="1">Amount</v-col>
                  <v-col :cols="3">
                    <v-text-field
                      v-model="propQuoteDetails.amount"
                      class="gray-input text-right"
                      dense
                      hide-details
                      solo
                      label="please enter amount"
                    ></v-text-field>
                  </v-col> -->
                  <v-col :cols="1">Month</v-col>
                  <v-col class="text-left" :cols="5">
                    <v-card flat width="20%">
                      <v-text-field
                        v-model="propQuoteDetails.month"
                        v-validate="'required'"
                        name="Month"
                        class="gray-input text-right"
                        dense
                        hide-details
                        type="number"
                        solo
                        :max="12"
                        :min="1"
                      ></v-text-field>
                    </v-card>
                    <span class="vee-validate-error">
                      {{ errors.first("Month") }}
                    </span>
                  </v-col>
                </v-row>
              </v-col>
            </v-spacer>
          </v-col>
          <v-col :cols="4">
            <v-card class="mx-auto rounded-lg jobCate" height="226" tile>
              <v-navigation-drawer width="100%" permanent>
                <v-toolbar elevation="0" color="#fff" height="50">
                  <v-toolbar-title>Job Cate</v-toolbar-title>
                </v-toolbar>
                <v-list class="py-0" flat dense>
                  <v-list-item-group
                    v-model="propQuoteDetails.jobCate"
                    active-class=""
                  >
                    <v-list-item
                      v-for="(cate, i) in jobCate"
                      :key="i"
                      :value="cate.value"
                    >
                      <template v-slot:default="{ active }">
                        <v-list-item-action>
                          <v-checkbox :input-value="active"></v-checkbox>
                        </v-list-item-action>
                        <v-list-item-content class="text-left">
                          <v-list-item-title
                            v-text="cate.text"
                          ></v-list-item-title>
                        </v-list-item-content>
                      </template>
                    </v-list-item>
                  </v-list-item-group>
                </v-list>
              </v-navigation-drawer>
            </v-card>
          </v-col>
        </v-row>
      </v-card>
      <v-btn-toggle
        v-model="selectedNav"
        borderless
        active-class="active-btn"
        class="rounded-b-0 rounded-tr-lg nav"
        dense
      >
        <v-btn color="#D9D9D9" value="Customer"> Customer </v-btn>
        <v-btn color="#D9D9D9" value="Items">Items</v-btn>
        <v-btn color="#D9D9D9" value="Payment">Payment</v-btn>
        <v-btn color="#D9D9D9" value="T&C">T&C</v-btn>
        <v-btn color="#D9D9D9" value="Attachment">Attachment</v-btn>
      </v-btn-toggle>
      <template v-if="selectedNav === 'Items'">
        <v-tooltip bottom>
          <template v-slot:activator="{ on }">
            <v-icon v-on="on" class="ml-5 pointer" color="#BABABC" size="20">
              mdi-calendar-blank
            </v-icon>
          </template>
          <span>project plan</span>
        </v-tooltip>
        <v-tooltip bottom>
          <template v-slot:activator="{ on }">
            <v-icon
              @click="openSelectQuote"
              v-on="on"
              class="ml-5 pointer"
              color="#BABABC"
              size="20"
            >
              mdi-file-settings
            </v-icon>
          </template>
          <span>Select Quote</span>
        </v-tooltip>
        <v-tooltip bottom>
          <template v-slot:activator="{ on }">
            <v-icon
              @click="addGroup"
              v-on="on"
              class="ml-5 pointer"
              color="#BABABC"
              size="24"
            >
              mdi-playlist-plus
            </v-icon>
          </template>
          <span>Add Group</span>
        </v-tooltip>
      </template>
      <v-divider></v-divider>
      <v-window class="quote-window" v-model="selectedNav">
        <v-window-item value="Customer">
          <Customer
            ref="customer"
            :items="propQuoteDetails.customer"
          ></Customer>
        </v-window-item>
        <v-window-item value="Items">
          <Items :items="propQuoteDetails.items"></Items>
        </v-window-item>
        <v-window-item value="Payment">
          <Payment :items="propQuoteDetails.payment"></Payment>
        </v-window-item>
        <v-window-item value="T&C">
          <TermsConditions
            :list="propQuoteDetails.termsConditionsList"
          ></TermsConditions>
        </v-window-item>
        <v-window-item value="Attachment">
          <Attachment
            :attachments="propQuoteDetails.attachmentList"
          ></Attachment>
        </v-window-item>
      </v-window>
    </div>
    <Dialog
      v-model="showDialog"
      :title="dialogTitle"
      :show-save="false"
      width="480"
    >
      <SaveQuote
        @submit="save"
        :type="propStep"
        :item="propQuoteDetails"
      ></SaveQuote>
    </Dialog>
    <Select
      :show.sync="showSelect"
      :show-save="false"
      :title="selectTitle"
      :headers="selectHeaders"
      :items="selectItems"
      :loading="selectLoading"
      width="904"
    ></Select>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Customer from "@/components/Quotation/Customer/Customer.vue";
import Items from "@/components/Quotation/Items/Items.vue";
import Payment from "@/components/Quotation/Payment/Payment.vue";
import Attachment from "@/components/Quotation/Attachment/Attachment.vue";
import TermsConditions from "@/components/Quotation/TermsConditions/TermsConditions.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import SaveQuote from "@/components/Quotation/Dialog/SaveQuote.vue";
import Select from "@/components/Quotation/Dialog/Select/Select.vue";
import { ICate, IQuoteDetails } from "@/components/Quotation/index";
@Component({
  components: {
    Customer,
    Payment,
    Items,
    TermsConditions,
    Attachment,
    Dialog,
    SaveQuote,
    Select,
  },
  props: {
    quoteDetails: {
      type: Object,
      default: () => ({}),
    },
    step: Number,
  },
})
export default class QuoteDetails extends Vue {
  // 1.AddQuote 2.EditQuote
  get propStep() {
    const propStep = this.$props.step;
    if (propStep === 6 && propStep === 8) {
      return 1;
    } else if (propStep === 7) {
      return 2;
    }
    return 1;
  }
  // dialog
  dialogTitle = "";
  showDialog = false;
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }

  selectedNav = "Customer";
  jobCate: Array<ICate> = [
    {
      text: "Delivery",
      value: "Delivery",
    },
    {
      text: "Testing for Cal",
      value: "Testing for Cal",
    },
    {
      text: "Delivery and Install",
      value: "Delivery and Install",
    },
  ];

  get gpPercentage() {
    if (this.propQuoteDetails) {
      const cost = Number(this.propQuoteDetails.cost.split(",").join(""));
      const gain = Number(this.propQuoteDetails.gain.split(",").join(""));
      if (cost > 0 && gain > 0 && !Number.isNaN(cost) && !Number.isNaN(gain)) {
        const quotient = gain / cost;
        const average = (quotient * 100).toFixed(2) + "%";
        return average;
      }
    }
    return "";
  }
  backfill: IQuoteDetails | null = null;
  get propQuoteDetails() {
    const propQuoteDetails = this.$props.quoteDetails;
    if (propQuoteDetails.id) {
      // 编辑
      const copyQuoteDetails = JSON.parse(JSON.stringify(propQuoteDetails));
      // 添加上响应式数据
      this.$set(this, "backfill", copyQuoteDetails);
    } else {
      // 新增
      this.backfill = propQuoteDetails;
    }
    return this.backfill;
  }
  // select
  showSelect = false;
  selectLoading = false;
  selectHeaders: object[] = [];
  selectItems: object[] = [];
  selectTitle = "";
  openSelect() {
    this.showSelect = true;
  }
  // Old Quote
  selectQuoteHeaders = [
    {
      text: "Quote#",
      value: "quote",
    },
    {
      text: "Project Type",
      value: "projectType",
    },
    {
      text: "Description",
      value: "description",
    },
    {
      text: "Added By",
      value: "addedBy",
    },
  ];

  openSelectQuote() {
    this.selectHeaders = this.selectQuoteHeaders;
    this.selectTitle = "Select Quote";
    this.getSelectQuoteItems();
    this.openSelect();
  }

  getSelectQuoteItems() {
    this.selectItems = [];
    this.selectLoading = true;
    setTimeout(() => {
      this.selectItems = [
        {
          id: "1",
          quote: "Q-22049",
          projectType: "AT",
          description: "Advance Tech",
          addedBy: "Candy Wong",
        },
        {
          id: "2",
          quote: "Q-22050",
          projectType: "DL",
          description: "Delivery",
          addedBy: "Mark Wong",
        },
      ];
      this.selectLoading = false;
    }, 2000);
  }
  // Approval/ UnApproval message
  selectMessageHeaders = [
    {
      text: "Message",
      value: "message",
    },
    {
      text: "Approved By",
      value: "approvedBy",
    },
    {
      text: "Date",
      value: "date",
    },
  ];

  openSelectMessage() {
    this.selectHeaders = this.selectMessageHeaders;
    this.selectTitle = "Approval/ UnApproval message";
    this.getSelectMessageItems();
    this.openSelect();
  }

  getSelectMessageItems() {
    this.selectItems = [];
    this.selectLoading = true;
    setTimeout(() => {
      this.selectItems = [
        {
          message: "Quotation  is approved",
          approvedBy: "Mark Wong",
          date: "2022-04-04 17:43",
        },
        {
          message: "Missing xx items",
          approvedBy: "Mark Wong",
          date: "2022-04-03 15:00",
        },
      ];
      this.selectLoading = false;
    }, 2000);
  }
  // action
  async openSave() {
    const validate1 = (this.$refs.customer as Customer).$validator.validate();
    const validate2 = this.$validator.validate();
    const validates = await Promise.all([validate1, validate2]);
    if (validates.includes(false)) {
      return;
    } else {
      this.dialogTitle = "Save";
      if (this.propStep === 1) {
        (this.propQuoteDetails as IQuoteDetails).id =
          "Q- " + new Date().getTime();
      }
      this.openDialog();
    }
  }

  addGroup() {
    if (this.propQuoteDetails) {
      const item = {
        id: String(new Date().getTime()),
        line: (this.propQuoteDetails.items.length + 1).toFixed(2),
        description: "",
        children: [],
      };
      this.propQuoteDetails.items.push(item);
    }
  }

  save() {
    if (this.propStep === 2) {
      this.$emit("edit", this.propQuoteDetails);
    } else {
      this.$emit("add", this.propQuoteDetails);
    }
    this.closeDialog();
  }
}
</script>
<style lang="scss" scoped>
@import "./QuoteDetails.scss";
</style>
